<template>
  <div class="application">
    <header class="header">应用管理</header>
    <div class="control">
      <el-button type="primary" size="mini" class="app_add_btn" @click="openAppAddDialog">应用接入</el-button>
      <div class="search_group">
        <el-select v-model="appSearchValue" placeholder="查询应用" no-data-text="暂无应用, 先接入应用吧">
          <el-option
            v-for="item in appList"
            :key="item.id"
            :label="item.Name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="mini" class="search_btn" @click="search">查询</el-button>
      </div>
    </div>
    <div class="container">
      <div class="table_group">
        <el-table :data="appTableList" style="" :stripe="true" class="container_table" empty-text="暂无数据">
          <el-table-column prop="id" label="ID" width="40" />
          <el-table-column prop="Name" label="名称" width="100" />
          <el-table-column prop="Describe" label="应用描述" width="150" />
          <el-table-column prop="APPKEY" label="AppKey" width="140">
            <template #default="{row, $index, column, store, _self}">
              <div class="appKey">
                <span class="appKey_text text-ellipsis">{{ row.APPKEY }}</span>
                <div class="copy_btn" @click="copyAppKey(row.APPKEY)">
                  <el-icon class="el-icon-document-copy"></el-icon>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="TID" label="TID" width="60" />
          <el-table-column prop="UID" label="UID" width="60" />
          <el-table-column prop="AppTypeText" label="应用类型" width="80" />
          <el-table-column prop="createAtText" label="接入时间" width="150" />
          <el-table-column prop="updatedAtText" label="最后更新时间" width="150" />
          <el-table-column prop="statusText" label="状态" width="60" />
          <el-table-column prop="control" label="操作" width="210" >
            <el-button ghost>编辑</el-button>
            <el-button ghost>删除</el-button>
            <el-button ghost>使用</el-button>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-model:currentPage="pageOptions.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50 ,100]"
        :page-size="pageOptions.limit"
        :pager-count="5"
        :total="pageOptions.total"
        background
        class="page_group"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      ></el-pagination>
    </div>


    <!-- 添加应用 -->
    <el-dialog
      v-model="isShowAppAddDialog"
      title="接入新的应用"
      :width="500"
      @close="closeAppAddDialog"
      custom-class="add_dialog"
    >
      <div class="main">
        <div class="info_item">
          <div class="label">应用名称</div>
          <el-input class="login_input" v-model="newAppInfo.name" placeholder="请输入应用名称" maxLength="20" clearable> </el-input>
        </div>
        <div class="info_item">
          <div class="label">应用描述</div>
          <el-input type="textarea" v-model="newAppInfo.Describe" placeholder="请输入应用描述" maxLength="30" clearable ></el-input>
        </div>
        <div class="info_item">
          <div class="label">应用类型</div>
          <el-select v-model="newAppInfo.appType" placeholder="应用类型">
            <el-option label="web" :value="1"></el-option>
            <el-option label="小程序" :value="2"></el-option>
          </el-select>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAppAddDialog">取消</el-button>
          <el-button type="primary" @click="addApplication">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted,ref,getCurrentInstance,nextTick,watchEffect,reactive,Ref, toRefs, watch} from 'vue';
/* API */
import { postAppInfo, getAppList, getAppInfo, updateAppInfo, delAppInfo } from '@/api/application'
/* utils */
import dayjs from 'dayjs';
import { browserCopyText } from '@/lib/script/utils';
import { ElMessage } from 'element-plus';
export default defineComponent({
  setup(){
    let appSearchValue = ref('');
    let appList = ref([]);
    let appTableList = ref([]);
    let pageOptions = reactive({
      pageNum: 1,
      limit: 20,
      total: 0,
    })

    // 添加应用信息
    let newAppInfo = reactive({
      name: "",
      Describe: "",
      appType: 1,
      polymerization: true,
    });

    let isShowAppAddDialog = ref(false); // 是否显示添加应用弹窗


    /* methods */
    // 处理列表数据(显示)
    const disposeData = data => {
      data = Array.isArray(data) ? data : [];
      return data.map(item => {
        return Object.assign(item, {
          AppTypeText: item.AppType == 1 ? 'web' : '小程序',
          createAtText: dayjs(item.createAt).format('YYYY-MM-DD HH:mm:ss'),
          updatedAtText: dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss'),
          statusText: item.status == 1 ? '正常' : '异常',
        })
      })
    }
    // 获取app列表
    const getAppInfoList = () => {
      let args = {
        pageNum: pageOptions.pageNum,
        limit: pageOptions.limit,
      }
      getAppList(args).then(resp => {
        let {code, data, message} = resp;
        if(code === 0) {
          appList.value = data || [];
          appTableList.value = disposeData(data)
          pageOptions.total = appTableList.value.length
        } else {
          ElMessage.error({message: `code ${code}; ${message}`})
        }
      })
    }
    // 打开添加应用弹窗
    const openAppAddDialog = _ => {
      isShowAppAddDialog.value = true;
    }
    // 关闭添加应用弹窗
    const closeAppAddDialog = _ => {
      isShowAppAddDialog.value = false;
    }
    // 新增应用
    const addApplication = _ => {
      let args = newAppInfo
      postAppInfo(args).then(resp => {
        let {code, data, message} = resp;
        if(code === 0) {
          ElMessage.success({message: '添加成功'})
          isShowAppAddDialog.value = false;
          search()
        } else {
          ElMessage.error({message: `code ${code}; ${message}`})
        }
      });
    }
    // 页容量change
    const onSizeChange = val => {
      pageOptions.limit = val;
      pageOptions.pageNum = 1;
      search()
    }
    // 页码change
    const onCurrentChange = val => {
      pageOptions.pageNum = val;
      search()
    }
    // 查询
    const search = () => {
      getAppInfoList()
    }
    // 
    const copyAppKey=(text)=>{
      let flag = browserCopyText(text)
      flag && ElMessage.success({message: '复制成功'})
    }


    getAppInfoList()


    const state = {
      appSearchValue,
      appList,
      appTableList,
      isShowAppAddDialog,
      newAppInfo,
      pageOptions,

      openAppAddDialog,
      closeAppAddDialog,
      addApplication,
      search,
      copyAppKey,
      onSizeChange,
      onCurrentChange,
    }
    return reactive(state)
  }
})
</script>

<style lang='less' scoped>
.application {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  header.header {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    font-size: 16px;
    padding: 0 16px;
  }
  .control {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    .app_add_btn {
      margin-right: 40px;
    }
    .search_group {
      display: flex;
      align-items: center;
      .search_btn {
        margin-left: 8px;
      }
    }
  }
  .container {
    width: 100%;
    padding: 0 16px;
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 88px;
    bottom: 0;
    .table_group {
      position: absolute;
      top: 0;
      bottom: 42px;
      left: 16px;
      right: 16px;
      overflow: auto;
    }
    .container_table {
      .appKey {
        display: flex;
        align-items: center;
        .appKey_text {
          max-width: 100px;
        }
        .copy_btn {
          position: relative;
          &::after {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
          }
        }
      }
    }
    .page_group {
      position: absolute;
      left: 16px;
      bottom: 10px;
    }
  }

  .add_dialog {
    .main {
      .info_item {
        margin-bottom: 10px;
        .label {
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
  }

}
</style>